<template>
    <div class="header">
        <div class="header-left">
            <div class="title">
                留学生教育系统
            </div>
            <div class="nav">
                <span class="nav-item">考试管理</span>
                <span class="nav-item">题库管理</span>
                <span class="nav-item">测试练习</span>
                <span class="nav-item">网课学习</span>
                <span class="nav-item">作业提交</span>
            </div>
        </div>
        <div class="header-right">
            <img src="../../assets/imgs/header-image.png" style="height: 40px;" alt="">
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.header {
    padding: 18px 80px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    height: 72px;
    white-space: nowrap;
    z-index: 100;
    background: #ffffff;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-left .title {
    font-size: 22px;
    font-weight: 700;
    line-height: 35px;
}

.header-left .title:hover {
    cursor: pointer;
    color:#4f81ff;
}

.header-left .nav {
    display: flex;
    align-items: center;
    margin-left: 60px;
    padding: 4px 0px 4px 0px;
    opacity: 1;
}

.header-left .nav .nav-item {
    font-size: 16px;
    cursor: pointer;
    font-weight: 400;
}

.header-left .nav .nav-item:hover {
    color:#4f81ff;
}

.header-left .nav .nav-item {
    padding: 0 16px;
}

.header-left .nav .nav-item:first-child {
    padding-left: 0px;
}

.header-left .nav .nav-item:last-child {
    padding-right: 0px;
}

.header-right {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中，如果需要 */
}

</style>